import './index.less';
import {inject, observer} from 'mobx-react';
import React from 'react';
import {Row, Col} from 'antd';
import {WeaTop, WeaTab, WeaRightMenu} from 'ecCom';
import AdvanceSearch from './AdvanceSearch';
import AnalyseEchart from './AnalyseEchart';
import FlowAnalyseCount from '../report-public/flow-analyse-count/index';
import FlowReportDetail from '../report-public/flow-report-detail/index';
import ReportNoRight from '../report-public/report-no-right/index';
import * as ReportUtil from "../../../util/reportUtil";

@inject('mostOverTimeReqStore')
@observer
export default class Main extends React.Component {

    constructor(props) {
        super(props);

        const {mostOverTimeReqStore} = props;
        const {initDatas} = mostOverTimeReqStore;
        initDatas && initDatas();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            const {clearStatus, initDatas} = this.props.mostOverTimeReqStore;
            clearStatus();
            initDatas();
        }
    }

    render() {
        const {mostOverTimeReqStore} = this.props;
        const {loading = false, advanceSearchData = {}, advanceSearchPara = {}, analyseData = {}, modalPara = {}, labels = {}, collectParams} = mostOverTimeReqStore;
        const {updateAdvanceSearchPara, showModal, closeModal, updateModalPara} = mostOverTimeReqStore; //action
        const {reportTitle = '', echart1Title = '', echart2Title = ''} = labels;
        const {tabDatas = [], noRight = false, bottomInfo = ''} = advanceSearchData;
        const {countData = [], echart1 = [], echart2 = []} = analyseData;
        const {tabKey = 1} = advanceSearchPara;
        return (
            <div className="most-overtime-request">
                {noRight ?
                    <ReportNoRight ecId={`${this && this.props && this.props.ecId || ''}_ReportNoRight@osrudj`}/>
                    :
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@clxmuf`} loading={loading} icon={<i className='icon-coms-workflow'/>} buttons={[]}
                            iconBgcolor='#0079DE' title={reportTitle} showDropIcon={false}>
                        <AdvanceSearch ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSearch@fjv50p`} advanceSearchData={advanceSearchData} advanceSearchPara={advanceSearchPara}
                                       updateAdvanceSearchPara={updateAdvanceSearchPara} tabKey={tabKey}/>
                        <FlowAnalyseCount ecId={`${this && this.props && this.props.ecId || ''}_FlowAnalyseCount@nj3ujx`} datas={countData} showDetailModal={showModal}/>
                        <div className="flow-doing-echart">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ys5okn`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@v34fkp`} span={12}><AnalyseEchart ecId={`${this && this.props && this.props.ecId || ''}_AnalyseEchart@9vxfy5`} loading={loading} datas={echart1} module={1}
                                                              title={echart1Title}
                                                              showModal={showModal}/></Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u6ayyq`} span={12}><AnalyseEchart ecId={`${this && this.props && this.props.ecId || ''}_AnalyseEchart@xcv2ef`} loading={loading} datas={echart2} module={2}
                                                              title={echart2Title}
                                                              showModal={showModal}/></Col>
                            </Row>
                        </div>
                        <FlowReportDetail ecId={`${this && this.props && this.props.ecId || ''}_FlowReportDetail@xfsxzz`} {...modalPara} reportid={-9} closeModal={closeModal}
                                          collectParams={collectParams} updateModalPara={updateModalPara}/>
                        <div className='count-bottom'>{bottomInfo}</div>
                    </WeaTop>
                }
            </div>
        )
    }
}